﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格选取</title>
	<style>
		body{padding:20px 50px;}
		table{margin-top:10px;width:100%;border:1px solid #ddd;border-collapse:collapse;}
		td,th{padding:3px 6px;border:1px solid #ddd;}
		thead tr{text-align:left;background-color:#efefef;}
		.odd{background-color:#efefef;}
		.selected{background-color:#fc0;color:#fff;}
	</style>
    <script src="../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function(){
			/*
				作业2：
					1）实现全选/反选效果
					2）点击表格任意地方把当前行选中/取消
			 */
			var $dataList = $('.data-list');

			// 隔行变色
			$('.data-list tr:even').addClass('odd');

			// 选择最第一行
			$('.first').click(function(){
				$('.data-list tbody tr').first().addClass('selected').find('input[name=check]')[0].checked = true;
			});

			// 选择最后一行
			$('.last').click(function(){
				$('.data-list tbody tr:last').addClass('selected').find('input[name=check]')[0].checked = true;
			});

			// 选择前三行
			$('.q3').click(function(){
				var checkbox = $('.data-list tbody tr:lt(3)').addClass('selected').find('input[name=check]');
				checkbox.prop('checked',true);
			});

			// 选择最后两行
			$('.h2').click(function(){
				var len = $('.data-list tbody tr').length;
				$('.data-list tbody tr:gt('+ (len-3) +')').addClass('selected').find(':checkbox').prop('checked',true);
				//$('.data-list tbody tr:gt(7)');
			});

			// 选择第五行
			$('.d5').click(function(){
				$('.data-list tbody tr').eq(4).addClass('selected').find(':checkbox').prop('checked',true);
			});
		});
	</script>
</head>
<body>
	<button class="first" f="1">选择第一行</button>
	<button class="last">选择最后一行</button>
	<button class="q3">选择前三行</button>
	<button class="h2">选择后两行</button>
	<button class="d5">选择第五行</button>
	<table class="data-list">
		<thead>
			<tr>
				<th width="20"><input type="checkbox" name="checkAll"></th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>婚姻状况</th>
				<th>工作状况</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tbody>
	</table>
</body>
</html>